const webpack = require('webpack');
const path = require('path');

/*
 * We've enabled MiniCssExtractPlugin for you. This allows your app to
 * use css modules that will be moved into a separate CSS file instead of inside
 * one of your module entries!
 *
 * https://github.com/webpack-contrib/mini-css-extract-plugin
 *
 */

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

function resolve(dir) {
	return path.join(__dirname, dir)
}

module.exports = {
	mode: 'development',
	module: {
		rules: [
			{
				include: [path.resolve(__dirname, 'src')],
				loader: 'babel-loader',

				options: {
					plugins: ['syntax-dynamic-import'],

					presets: [
						[
							'env',
							{
								modules: false
							}
						]
					]
				},

				test: /\.js$/
			},
			{
				test: /\.(scss|css)$/,

				use: [
					{
						loader: 'style-loader'
					},
					{
						loader: 'css-loader'
					},
					{
						loader: 'sass-loader'
					},
					{
						loader: 'postcss-loader',
						options: {
							plugins: [require('autoprefixer')]
						}
					}
				]
			},
			{
				test: /\.vue$/,
        loader: 'vue-loader'
			},
			{
				test: /\.(png|jpe?g|gif)$/i,
				use:[{
					loader:'url-loader',
					options: {
						name: '[name].[ext]',
						limit: 50000,
						output: 'images'
					}
				}]
			}
		]
	},

	resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
			'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },

	plugins: [
		new UglifyJSPlugin(),
		new VueLoaderPlugin(),
		new webpack.DefinePlugin({
      "process.env": require('./index')
    }),
		new HtmlWebpackPlugin({
			filename: 'index.html',
			title: '商户入驻',
			template: 'index.html',
			inject: true,
			hash: true
		})
	],
	
	mode: 'development',

	optimization: {
		splitChunks: {
			cacheGroups: {
				vendors: {
					priority: -10,
					test: /[\\/]node_modules[\\/]/
				}
			},

			chunks: 'async',
			minChunks: 1,
			minSize: 30000,
			name: true
		}
	},

	devServer: {
		contentBase: path.join(__dirname, './dist'),
		port: 5757,
		host: '192.168.1.65',
		open: true,
		inline: true,
		index: 'index.html',
		compress: true,
		overlay: true
	}
};
